import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { ArrowRight, Brain, Eye, Link2, MessagesSquare, Scissors, Wrench } from "lucide-react";
import { getPublicShare, readShareMeta } from "@/lib/conversations/service";
import { LogoMark, Wordmark } from "@/components/brand/logo";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { SimpleMarkdown } from "@/components/markdown/simple-markdown";
import { providerName } from "@/lib/client/providers";
import { formatMs, formatTokens, cn } from "@/lib/utils";

export const dynamic = "force-dynamic";

/* ------------------------------------------------------------------------------------------------
 * Snapshot shape (frozen copy written by `shareConversation`). Parsed defensively; the optional first
 * `$meta` element (v2) is skipped by the message parser and read separately with `readShareMeta`.
 * ---------------------------------------------------------------------------------------------- */
type SnapPart =
  | { type: "text"; text: string }
  | { type: "reasoning"; text: string; durationMs?: number }
  | { type: "tool-call"; id?: string; name: string; arguments?: Record<string, unknown>; argumentsText?: string; result?: unknown; isError?: boolean }
  | { type: "citation"; url?: string; title?: string; snippet?: string };

interface SnapMessage {
  role: "user" | "assistant" | "system";
  content: string;
  modelKey: string | null;
  createdAt: string | null;
  parts: SnapPart[];
  usage: { inputTokens?: number; outputTokens?: number; totalTokens?: number } | null;
  latencyMs: number | null;
}

function isRecord(v: unknown): v is Record<string, unknown> {
  return typeof v === "object" && v !== null;
}

function parseSnapshot(raw: unknown): SnapMessage[] {
  if (!Array.isArray(raw)) return [];
  const out: SnapMessage[] = [];
  for (const m of raw) {
    if (!isRecord(m)) continue;
    const role = m.role === "user" || m.role === "assistant" || m.role === "system" ? m.role : null;
    if (!role) continue;
    const parts: SnapPart[] = [];
    if (Array.isArray(m.parts)) {
      for (const p of m.parts) {
        if (!isRecord(p) || typeof p.type !== "string") continue;
        if ((p.type === "text" || p.type === "reasoning") && typeof p.text === "string") parts.push(p as SnapPart);
        else if (p.type === "tool-call" && typeof p.name === "string") parts.push(p as SnapPart);
        else if (p.type === "citation") parts.push(p as SnapPart);
      }
    }
    const createdAt = typeof m.createdAt === "string" ? m.createdAt : m.createdAt instanceof Date ? m.createdAt.toISOString() : null;
    out.push({
      role,
      content: typeof m.content === "string" ? m.content : "",
      modelKey: typeof m.modelKey === "string" ? m.modelKey : null,
      createdAt,
      parts,
      usage: isRecord(m.usage) ? (m.usage as SnapMessage["usage"]) : null,
      latencyMs: typeof m.latencyMs === "number" ? m.latencyMs : null,
    });
  }
  return out;
}

function splitModelKey(key: string | null): { provider: string | null; model: string | null } {
  if (!key) return { provider: null, model: null };
  const [provider, ...rest] = key.split("/");
  return { provider: provider || null, model: rest.join("/") || key };
}

function formatDate(d: Date) {
  return d.toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" });
}

/* ------------------------------------------------------------------------------------------------
 * Metadata — noindex, per-share OG title
 * ---------------------------------------------------------------------------------------------- */
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
  const { id } = await params;
  const share = await getPublicShareSafe(id, { peek: true });
  const count = share ? parseSnapshot(share.snapshot).filter((m) => m.role !== "system").length : 0;
  const description = share ? `A conversation shared from PolyLLM · ${count} message${count === 1 ? "" : "s"}.` : "This shared conversation is unavailable.";
  return {
    title: share ? share.title : "Shared conversation",
    description,
    robots: { index: false, follow: false, nocache: true, googleBot: { index: false, follow: false } },
    openGraph: share ? { title: `${share.title} · Shared from PolyLLM`, description, type: "article", siteName: "PolyLLM" } : undefined,
    twitter: share ? { card: "summary", title: `${share.title} · Shared from PolyLLM`, description } : undefined,
  };
}

async function getPublicShareSafe(id: string, opts: { peek?: boolean } = {}) {
  if (!id || id.length > 128 || !/^[\w-]+$/.test(id)) return null;
  try {
    return await getPublicShare(id, opts);
  } catch {
    return null;
  }
}

/* ------------------------------------------------------------------------------------------------
 * Page — mobile-first: 16px gutters, stacked header, full-width CTA; widens at sm/md.
 * ---------------------------------------------------------------------------------------------- */
export default async function SharePage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const share = await getPublicShareSafe(id);
  if (!share) notFound();

  const messages = parseSnapshot(share.snapshot).filter((m) => m.role !== "system");
  const meta = readShareMeta(share.snapshot);
  const models = Array.from(new Set(messages.map((m) => m.modelKey).filter((k): k is string => !!k)));
  const created = share.createdAt instanceof Date ? share.createdAt : new Date(share.createdAt as unknown as string);
  const views = share.viewCount + 1; // this visit was counted after the row was read

  return (
    <div className="flex min-h-dvh flex-col bg-bg">
      <header className="glass sticky top-0 z-40 pt-[var(--sat)] hairline-b">
        <div className="mx-auto flex h-12 w-full max-w-3xl items-center justify-between gap-3 px-4 sm:h-14 sm:px-6">
          <Link href="/" className="flex min-w-0 items-center gap-2 rounded-md" aria-label="PolyLLM home">
            <LogoMark size={24} />
            <Wordmark className="text-[16px]" />
            <span className="hidden truncate text-[12.5px] text-fg-subtle sm:inline">· Shared conversation</span>
          </Link>
          <Button asChild size="sm" className="shrink-0">
            <Link href="/signup">
              Open PolyLLM
              <ArrowRight />
            </Link>
          </Button>
        </div>
      </header>

      <main className="mx-auto w-full max-w-3xl flex-1 px-4 pb-14 pt-6 sm:px-6 sm:pt-10">
        <header className="pb-5 hairline-b sm:pb-6">
          <p className="flex items-center gap-2 font-mono text-[11px] uppercase tracking-[0.14em] text-fg-subtle">
            <MessagesSquare className="size-3.5" aria-hidden />
            Shared from PolyLLM
            {meta?.partial ? (
              <Badge variant="accent" className="ml-1 normal-case tracking-normal">
                <Scissors />
                Excerpt · {meta.selectedCount} of {meta.totalCount}
              </Badge>
            ) : null}
          </p>
          <h1 className="mt-2 text-balance text-[24px] font-semibold leading-tight tracking-tight sm:text-3xl">{share.title}</h1>
          <dl className="mt-3 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-[13px] text-fg-muted">
            <div className="flex items-center gap-1.5">
              <dt className="sr-only">Shared on</dt>
              <dd>
                <time dateTime={created.toISOString()}>{formatDate(created)}</time>
              </dd>
            </div>
            <span aria-hidden>·</span>
            <div>
              <dt className="sr-only">Messages</dt>
              <dd>
                {messages.length} message{messages.length === 1 ? "" : "s"}
              </dd>
            </div>
            <span aria-hidden>·</span>
            <div className="flex items-center gap-1 tabular-nums">
              <Eye className="size-3.5 text-fg-subtle" aria-hidden />
              <dt className="sr-only">Views</dt>
              <dd>
                {views} view{views === 1 ? "" : "s"}
              </dd>
            </div>
          </dl>
          {models.length ? (
            <ul className="mt-3 flex flex-wrap gap-1.5" aria-label="Models used">
              {models.map((k) => {
                const { provider, model } = splitModelKey(k);
                return (
                  <li key={k}>
                    <Badge className="h-7 px-2.5 text-[12px]">
                      <ProviderIcon provider={provider} size={13} />
                      {model}
                    </Badge>
                  </li>
                );
              })}
            </ul>
          ) : null}
        </header>

        <ol className="mt-6 space-y-6 sm:mt-8 sm:space-y-7">
          {messages.map((m, i) => (
            <li key={i} id={`m-${i + 1}`}>
              <MessageView message={m} />
            </li>
          ))}
        </ol>

        <aside className="panel mt-12 p-5 text-center sm:mt-14 sm:p-8">
          <div className="mx-auto flex size-10 items-center justify-center">
            <LogoMark size={36} />
          </div>
          <p className="mt-3 text-balance text-[17px] font-semibold tracking-tight sm:text-lg">Continue this conversation with your own keys</p>
          <p className="mx-auto mt-2 max-w-md text-balance text-[14px] leading-6 text-fg-muted">One interface, every model. Bring your OpenAI, Anthropic, Gemini, xAI, Mistral, DeepSeek, Kimi, OpenRouter or Cerebras key — chat, compare in the Arena and track every token.</p>
          <div className="mt-5 flex flex-col items-stretch justify-center gap-2 sm:flex-row sm:items-center">
            <Button asChild size="lg" className="w-full sm:w-auto">
              <Link href="/signup">
                Open PolyLLM
                <ArrowRight />
              </Link>
            </Button>
            <Button asChild size="lg" variant="ghost" className="w-full sm:w-auto">
              <Link href="/">Learn more</Link>
            </Button>
          </div>
        </aside>
      </main>

      <footer className="px-4 pb-[max(20px,var(--sab))] pt-6 text-center text-xs text-fg-subtle hairline-t">
        <p className="text-balance">
          Frozen snapshot shared by a PolyLLM user · attachments are not included · model output can be wrong.{" "}
          <Link href="/privacy" className="underline-offset-4 hover:text-fg hover:underline">
            Privacy
          </Link>
          {" · "}
          <Link href="/terms" className="underline-offset-4 hover:text-fg hover:underline">
            Terms
          </Link>
        </p>
      </footer>
    </div>
  );
}

/* ------------------------------------------------------------------------------------------------
 * Message rendering
 * ---------------------------------------------------------------------------------------------- */
function MessageView({ message }: { message: SnapMessage }) {
  if (message.role === "user") {
    const text = message.parts.filter((p): p is Extract<SnapPart, { type: "text" }> => p.type === "text").map((p) => p.text).join("\n\n") || message.content;
    return (
      <div className="flex justify-end">
        <div className="max-w-[92%] rounded-2xl rounded-br-md bg-bg-muted px-4 py-2.5 text-[15px] leading-7 sm:max-w-[80%]">
          <p className="sr-only">You said:</p>
          <SimpleMarkdown>{text}</SimpleMarkdown>
        </div>
      </div>
    );
  }

  const { provider, model } = splitModelKey(message.modelKey);
  const reasoning = message.parts.filter((p): p is Extract<SnapPart, { type: "reasoning" }> => p.type === "reasoning" && p.text.trim().length > 0);
  const tools = message.parts.filter((p): p is Extract<SnapPart, { type: "tool-call" }> => p.type === "tool-call");
  const citations = message.parts.filter((p): p is Extract<SnapPart, { type: "citation" }> => p.type === "citation" && !!p.url);
  const textParts = message.parts.filter((p): p is Extract<SnapPart, { type: "text" }> => p.type === "text");
  const text = textParts.map((p) => p.text).join("\n\n") || message.content;
  const totalTokens = message.usage?.totalTokens ?? ((message.usage?.inputTokens ?? 0) + (message.usage?.outputTokens ?? 0) || null);

  return (
    <article className="flex gap-2.5 sm:gap-3">
      <span className="mt-1 flex size-7 shrink-0 items-center justify-center rounded-md border border-border bg-bg-elevated" aria-hidden>
        <ProviderIcon provider={provider} size={14} />
      </span>
      <div className="min-w-0 flex-1">
        <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[13px]">
          <span className="font-medium">{model ?? "Assistant"}</span>
          {provider ? <span className="text-fg-subtle">{providerName(provider)}</span> : null}
        </div>

        {reasoning.length ? (
          <details className="group mt-2 rounded-lg border border-border bg-bg-subtle/60">
            <summary className="flex min-h-[40px] cursor-pointer select-none items-center gap-2 px-3 py-2 text-[13px] text-fg-muted marker:content-none [&::-webkit-details-marker]:hidden">
              <Brain className="size-3.5" aria-hidden />
              Reasoning
              {reasoning[0].durationMs ? <span className="font-mono text-[11px] text-fg-subtle">· {formatMs(reasoning[0].durationMs)}</span> : null}
              <span className="ml-auto text-[11px] text-fg-subtle group-open:hidden">Show</span>
              <span className="ml-auto hidden text-[11px] text-fg-subtle group-open:inline">Hide</span>
            </summary>
            <div className="border-t border-border px-3 py-3 text-[13px] leading-6 text-fg-muted">
              <SimpleMarkdown className="text-[13px]">{reasoning.map((r) => r.text).join("\n\n")}</SimpleMarkdown>
            </div>
          </details>
        ) : null}

        {tools.length ? (
          <ul className="mt-2 space-y-1.5">
            {tools.map((t, i) => (
              <li key={t.id ?? i} className="rounded-lg border border-border bg-bg-subtle/60 px-3 py-2">
                <div className="flex items-center gap-2 text-[12.5px]">
                  <Wrench className="size-3.5 text-fg-subtle" aria-hidden />
                  <span className="font-mono font-medium">{t.name}</span>
                  {t.isError ? <Badge variant="danger">error</Badge> : null}
                </div>
                {t.argumentsText || t.arguments ? <pre className="mt-1.5 overflow-x-auto font-mono text-[11.5px] leading-5 text-fg-muted scrollbar-thin">{t.argumentsText ?? JSON.stringify(t.arguments, null, 2)}</pre> : null}
              </li>
            ))}
          </ul>
        ) : null}

        <div className={cn("mt-2", !text && "text-[14px] italic text-fg-subtle")}>{text ? <SimpleMarkdown>{text}</SimpleMarkdown> : "No text in this message."}</div>

        {citations.length ? (
          <ol className="mt-3 space-y-1">
            {citations.map((c, i) => (
              <li key={`${c.url}-${i}`} className="flex items-start gap-2 text-[12.5px]">
                <Link2 className="mt-1 size-3.5 shrink-0 text-fg-subtle" aria-hidden />
                <a href={c.url} target="_blank" rel="noopener noreferrer nofollow" className="min-w-0 truncate text-accent underline-offset-4 hover:underline">
                  {c.title || c.url}
                </a>
              </li>
            ))}
          </ol>
        ) : null}

        {totalTokens || message.latencyMs ? (
          <p className="mt-2.5 font-mono text-[11px] tabular-nums text-fg-subtle">
            {totalTokens ? `${formatTokens(totalTokens)} tokens` : null}
            {totalTokens && message.latencyMs ? " · " : null}
            {message.latencyMs ? formatMs(message.latencyMs) : null}
          </p>
        ) : null}
      </div>
    </article>
  );
}